<template>
  <div>
    <van-tabs v-model="activeName"  @click="onClick">
        <van-tab v-for="item in navData.navData"  :key="item.id" 
       :title="item.name" :name="item.id">
       <div class="top">
       <div class="top1">{{item.name}}</div>
       <div class="top2">{{item.front_name}}</div>
       </div>
       <div class="cpl">
         <div class="cpl1" v-for="item1 in info.data" :key="item1.id">
           <div class="cpl2"><img :src="item1.list_pic_url"></div>
           <div class="cpl3">{{item1.name}}</div>
           <div class="cpl4">￥{{item1.retail_price}}</div>
         </div>
         <div class="cpl1" style="height:0"></div>
       </div>
       
       </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {categoryNav,goodsList} from '@/api/category/list/index'
export default {
  data(){
    return{
       navData:[],
       info:[],
       activeName:''

    }
  },
  async created(){
    var result = await categoryNav({
      id:this.$route.params.ids
    })
    this.navData=result
    console.log(result)
    var results =await goodsList({
      categoryId:this.$route.params.ids
    })
    this.info=results
    this.activeName=result.currentNav.id
  },
  methods:{
    async onClick(name){
      var result1 = await goodsList({
      categoryId:name
      })
     this.info=result1
    }
  }
}
</script>

<style>
.top{
  width: 100%;
  height: 100px;
}
.top1{
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}
.top2{
  color: grey;
}
.cpl{
  width: 100%;
  height: 1222.5px;
  background-color: #f4f4f4;
  display: flex;
  justify-content:space-around;
  flex-wrap: wrap;
}
.cpl1{
  width: 49%;
  height: 240px;
  background-color: white;
}
.cpl1{
  float: left;
}
.cpl2 img{
  width: 100%;
  height: 100%;
}
.cpl4{
  color: #B42868;
}
</style>